<template>
	<view :data-theme="theme">
		<useNavBar :title="$t(`page.users.userInfo.navTitle`)">
			<view slot="right" style="color:#fff" class="iconfont icon-more" @click="open"></view>
		</useNavBar>
		<form @submit="formSubmit" report-submit='true'>
			<view class='personal-data'>
				<view class='list'>
					<view class="item acea-row row-between-wrapper" style="height: 144rpx;">
						<view>{{$t(`page.users.userInfo.avatar`)}}</view>
						<view class="pictrue" @click.stop='uploadpic'>
							<image :src='newAvatar ? newAvatar : userInfo.avatar'></image>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>{{$t(`page.users.userInfo.name`)}}</view>
						<view class='input'>
							<input type='text' name='nickname' :value='userInfo.nickname' maxlength="20" />
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>ID</view>
						<view class='input acea-row row-between-wrapper'>
							<input type='text' :value='uid' disabled='true' class='id' />
							<text class='iconfont icon-suozi'></text>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper' v-if="userInfo.email">
						<view>{{$t(`page.users.userInfo.email`)}}</view>
						<view class="input acea-row row-between-wrapper">
							<input type='text' disabled='true' name='email' :value='userInfo.email' />
							<text class='iconfont icon-suozi'></text>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper' v-if="userInfo.phone">
						<view>{{$t(`page.users.userInfo.phone`)}}</view>
						<view class="input acea-row row-between-wrapper">
							<input type='number' disabled='true' name='phone' :value='userInfo.phone' />
							<text class='iconfont icon-suozi'></text>
						</view>
					</view>
					<view class="item acea-row row-between-wrapper" v-if="userInfo.userType == 'email' || userInfo.userType == 'phone'">
						<view>{{$t(`page.users.userInfo.password`)}}</view>
						<view class="input" @click="reset(userInfo.userType,'reset')">
							{{$t(`message.tips.edidM`)}}<text class="iconfont icon-xiangyou"></text>
						</view>
					</view>
					<view class="item acea-row row-between-wrapper" >
						<view>{{$t(`userDrawer.data[6].name`)}}</view>
						<view class='input' @click='show=true'>
							{{language}}
						</view>
					</view>
				</view>
				<button class='modifyBnt bg_color' formType="submit">{{$t(`page.users.userInfo.save`)}}</button>
				<view class="logOut cart-color acea-row row-center-wrapper" @click="modal = true">{{$t(`page.users.userInfo.logOut`)}}</view>
			</view>
		</form>
		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<user-drawer @close="closeDrawer"></user-drawer>
		</tui-drawer>
		<tui-modal :show="modal" @click="handleClick" @cancel="hide" :title="$t(`message.login.prompt`)" :content="$t(`message.login.logout`)"></tui-modal>
		<u-picker :show="show" :columns="columns" keyName="label" @confirm='languagelTab' @cancel="closePicker"></u-picker>
	</view>
</template>

<script>
	import tuiModal from "@/components/tui-modal/tui-modal"
	import {userEdit,getLogout} from '@/api/user.js';
	import {toLogin} from '@/libs/login.js';
	import { mapState } from 'pinia';
	import {Debounce} from '@/utils/validate.js'
	import { useAppStore } from '@/stores/app'
	const appStore = useAppStore()
	export default {
		data() {
			return {
				memberInfo: {},
				loginType: 'h5', //app.globalData.loginType
				userIndex: 0,
				newAvatar: '',
				theme:'theme3',
				rightDrawer: false,
				modal: false,
				show:false,
				language:'中文',
				columns:[[{
                        label: '中文',
                        // 其他属性值
                        id: 'zh-Hans'
                        // ...
                    }, {
                        label: 'English',
                        id: 'en'
                    }, {
                        label: 'Русский язык',
                        id: 'ru'
                    }]]
			};
		},
		components:{
			tuiModal
		},
		computed: mapState(useAppStore,['isLogin', 'uid', 'userInfo']),
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t(`page.users.userInfo.navTitle`)
			})
			if (!this.isLogin) {
				toLogin();
			}
			this.columns[0].forEach(item=>{
				if(item.id===uni.getLocale()){
				this.language = item.label
				}
			})
			
		},
		methods: {
			open(){
				this.rightDrawer = true
			},
			closeDrawer(e) {
				this.rightDrawer = false
				if(!e){
					this.rightDrawer = false
				}
			},
			reset(type,scene){
				uni.navigateTo({
					url:'/pages/users/user_pwd_edit/index?type=' + type + '&scene=' + scene
				})
			},
			/**
			 * 退出登录
			 * 
			 */
			handleClick(e) {
				let index = e.index,that = this;
				if (index === 1) {
					getLogout().then(res => {
						that.$Cache.set('login_back_url', '/pages/index/index')
						appStore.LOGOUT()
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}).catch(err => {
						console.log(err);
					});
				} 
				this.hide();
			},
			hide() {
				this.modal = false;
			},
			/**
			 * 上传文件
			 * 
			 */
			uploadpic: function() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					name: 'multipart',
					model: "maintain",
					pid: 0
				}, function(res) {
					that.newAvatar = res.data.url;
				});
			},

			/**
			 * 提交修改
			 */
			formSubmit: Debounce(function(e) {
				let that = this,
					value = e.detail.value
				if (!value.nickname) return that.$util.Tips({
					title: this.$t(`page.users.userInfo.msg`)
				});
				value.avatar = that.newAvatar?that.newAvatar:that.userInfo.avatar;
				userEdit(value).then(res => {
					appStore.changInfo({
						amount1: 'avatar',
						amount2: that.newAvatar
					})
					return that.$util.Tips({
						title: this.$t(`message.login.saveSU`),
						icon: 'success'
					}, {
						tab: 3,
						url: 1
					});

				}).catch(msg => {
					return that.$util.Tips({
						title: msg || '保存失败，您并没有修改'
					}, {
						tab: 3,
						url: 1
					});
				});
			}),
			returns(){
				uni.navigateBack()
			},
			languagelTab(n){
				 this.language = n.value[0].label
				//  语言切换
				this.show=false
				uni.setLocale(n.value[0].id);
				this.$i18n.locale = n.value[0].id;
			},
			closePicker(){
				this.show=false
			}
		}
	}
</script>

<style scoped lang="scss">
	.personal-data .list {
		background-color: #fff;
	}

	.personal-data .list .item {
		border-bottom: 1rpx solid #f2f2f2;
		padding: 40rpx 30rpx;
		line-height:30rpx;
		font-size: 32rpx;
		color: #282828;
	}

	.personal-data .list .item .phone {
		width: 160rpx;
		height: 56rpx;
		font-size: 24rpx;
		color: #fff;
		line-height: 56rpx;
		border-radius: 32rpx
	}

	.personal-data .list .item .pictrue {
		width: 88rpx;
		height: 88rpx;
		position: relative;
	}

	.personal-data .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.personal-data .list .item .input {
		width: 415rpx;
		text-align: right;
		color: #868686;
	}

	.personal-data .list .item .input .id {
		width: 365rpx;
	}

	.personal-data .list .item .input .iconfont {
		font-size: 35rpx;
	}

	.personal-data .modifyBnt {
		font-size: 32rpx;
		color: #fff;
		width: 690rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 76rpx auto 0 auto;
	}
	.bg_color{
		@include main_bg_color(theme);
	}
	.personal-data .logOut {
		font-size: 32rpx;
		text-align: center;
		width: 690rpx;
		height: 90rpx;
		border-radius: 45rpx;
		margin: 30rpx auto 0 auto;
	}
	::v-deep .tui-red{
		@include main_bg_color(theme);
	}
	::v-deep .tui-red-outline{
		@include main_color(theme);
		@include coupons_border_color(theme);
		
	}
</style>
